<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../asserts/plugins/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
            // 添加商品
            $("button[name=add]").click(function () {
                let img_ele = $("input[name=file_img]")[0];
                let file = img_ele.files[0];
                let formData = new FormData();
                formData.append("type", "addCommodity");
                formData.append("name", $("input[name=name]").val());
                formData.append("stock", $("input[name=stock]").val());
                formData.append("price", $("input[name=price]").val());
                formData.append("file_img", file);
                $.ajax({
                    url:"/KunKunMarket/CommodityController",
                    type:"post",
                    contentType:false,
                    processData: false,
                    data:formData,
                    dataType:"json",
                    success:function (respBean) {
                        alert(respBean.msg);
                    }
                })
            });
            //查看自己店铺内的商品
            function getCommodityListByUserId(){
                $.ajax({
                    url: "/KunKunMarket/CommodityController",
                    type: "get",
                    dataType: "json",
                    data: {
                        type:"getCommodityListByUserId"
                    },
                    success:function (respBean) {
                        if (respBean.status == 500){
                            alert(respBean.msg);
                            return;
                        }
                        $("#myCommodityList").text('');
                        for (let i=0; i<respBean.data.length; i++){
                            let li_ele = document.createElement("li");
                            let sp_0 = $('<span style="display: none"></span>')[0];
                            let sp_1 = document.createElement("span");
                            let sp_2 = document.createElement("span");
                            let sp_3 = document.createElement("span");
                            let sp_4 = document.createElement("span");
                            let del_ele = $('<button class="del_btn">删除</button>')[0];
                            let edit_btn = $('<button class="edit_btn">编辑</button>')[0];
                            edit_btn.onclick = function(){
                                alert(1);
                            }
                            let url = "/KunKunMarket/CommodityController?type=deleteCommodityById&id=" + respBean.data[i].id;
                            del_ele.onclick = (function () {
                                $.ajax({
                                    url:url,
                                    type:"get",
                                    dataType:"json",
                                    success:function (respBean) {
                                        alert(respBean.msg);
                                        if (respBean.status == 200){
                                            getCommodityListByUserId();
                                        }
                                    }
                                })
                            });
                            sp_0.innerText = respBean.data[i].id;
                            sp_1.innerText = respBean.data[i].name;
                            sp_2.innerText = respBean.data[i].img_url;
                            sp_3.innerText = respBean.data[i].stock;
                            sp_4.innerText = respBean.data[i].price;
                            li_ele.appendChild(sp_0);
                            li_ele.appendChild(sp_1);
                            li_ele.appendChild(sp_2);
                            li_ele.appendChild(sp_3);
                            li_ele.appendChild(sp_4);
                            li_ele.appendChild(edit_btn);
                            li_ele.appendChild(del_ele);

                            $("#myCommodityList")[0].appendChild(li_ele);
                        }
                    }
                });
            }
            getCommodityListByUserId();

            //测试更改图片
            $("button[name=btn_test]").click(function () {
                let img_ele = $("input[name=file_img]:eq(1)")[0];
                let file = img_ele.files[0];
                let formData = new FormData();
                formData.append("type", "updateCommodityImgById");
                formData.append("id", '19');
                formData.append("file_img", file);
                $.ajax({
                    url:"/KunKunMarket/CommodityController",
                    type:"post",
                    contentType:false,
                    processData: false,
                    data:formData,
                    dataType:"json",
                    success:function (respBean) {
                        alert(respBean.msg);
                    }
                })
                alert(222);
            });

        })

    </script>
</head>
<body>

    <h1>我的店铺：店内商品展示，添加商品，删除商品，修改商品</h1>
    <form>
        <h2>添加商品</h2>
        商品名：<input type="text" name="name"><br>
        图片：<input type="file" name="file_img"><br>
        库存：<input type="number" name="stock"><br>
        单价：<input type="text" name="price"><br>
        <button type="button" name="add">添加</button>
    </form>

    <ul id="myCommodityList">

    </ul>

    <input type="file" name="file_img">
    <button name="btn_test">确认更改</button>
</body>
</html>